
//入口文件导入vue 组件
import Vue from 'vue';
//导入路由包
import VueRouter from 'vue-router';
//安装路由
Vue.use(VueRouter);

//导入resource请求包
import VueResource from 'vue-resource';
//安装请求包
Vue.use(VueResource);

//导入vuex
import Vuex from 'vuex';
//注册vuex
Vue.use(Vuex)
//每次程序调用启动进入main.js 都把本地存储的car数据取出。
var car = JSON.parse(localStorage.getItem('car') || '[]')
//建立vuex仓储
var store = new Vuex.Store({
  state:{// this.$store.state.***
    //建立一个购物车对象切片，储存添加进购物车的商品对象。将本地存储的car放入中间仓储中。
    car:car
    //对象的设计
    //{id:商品的id，count：要够买的数量，price：商品的单价，select：false 商品是否被选中}
  },
  mutations:{// this.$store.commit('方法的名称', '按需传递唯一的参数')



    //注册点击加入购物车的方法，每次点击加入购物车都要对购物车中的对象状态进行更新。
    //首先更新存在中间仓储中的数据，之后同步更新到本地储存中。
  //分为两种情况1.购物车中没有该商品，那么直接把组件传来的参数存入car中
  //2.购物车中有这个商品，那么在原有的基础上加数量并更新本地储存。
  addToCar(state,goodsinfo){  
  //实现判断购物车中检查有无该商品，遍历整个car对象并把每个的id和串来的商品id进行对比。
  //有该产品数量叠加无该产品直接加入对象

  //若没有一个原先存在那么flag不变否则变为true、
     var flag = false 
    state.car.some(item =>{
        if (goodsinfo.id == item.id){
            item.count += parseInt(goodsinfo.count)
              flag = true
              return true
            
        }
    })
// 如果最终，循环完毕，得到的 flag 还是 false，则把商品数据直接 push 到 购物车中
    if (!flag){
      state.car.push(goodsinfo)
    }

    //完成一切的更新之后就把更新好的数据放入本地存储中
    localStorage.setItem('car',JSON.stringify(state.car))
    },

    updateGoodsInfo(state,goodsinfo){
      //修改购物车数量时激活的方法
      state.car.some(item=>{
        if (item.id == goodsinfo.id){
          item.count = parseInt(goodsinfo.count)
          return true
        }
      })

      //修改商品数量后，把store中的car数据同步到本地储存中
      localStorage.setItem('car',JSON.stringify(state.car))
    },

    removeFormCar(state,id){
        //在购物车组件中点击删除后调用的方法，通过传来的对应商品id来删除对应的商品
        state.car.some((item,i)=>{
          if (item.id == id){
            state.car.splice(i,1)
            return true

          }
        })
      //将删除后的数据更新到本地内存中‘
      localStorage.setItem("car",JSON.stringify(state.car))
    },


    updateGoodsSelected(state,info){
      //每当购物车中的选择子组件发生变化时激活此方法
      state.car.some(item => {
        if (item.id == info.id){
          item.selected = info.selected
        }
      })
      //把最新的所有购物车商品状态保存到store中去
      localStorage.setItem('car',JSON.stringify(state.car))
    }

  },
  getters:{// this.$store.getters.***
      //这里监听state属性只要有变化就返回一个新的数据
      getAllCount(state){
        var c = 0;
        state.car.forEach(item => { 
          c += item.count
          
        });

        return c
      },


      //这里监听state属性每当变化就把所有商品的对象的id作为键数量作为值传出
      getGoodsCount(state){
        var o = {}
        state.car.forEach(item=>{
          o[item.id] = item.count
        })
        return o
      },


      //这里监听state属性每当变化就把所有商品的对象的id作为键选定状态作为值传出
      getGoodsSelected(state){
        var o = {}
        state.car.forEach(item => {
          o[item.id] = item.selected
        })
        return o
      },


      getGoodsCountAndAmount(state){
        var o = {
          count:0,
          amount:0
        }

        state.car.forEach(item=>{
          if(item.selected){
            o.count += item.count
            o.amount += item.price * item.count
          }
        })

        return  o

      }



  }
})

//导入mui 的样式
import './lib/mui/css/mui.css';


// //按需导入mint-ui 中的组件  
// import {Header, Swipe, SwipeItem,Button,Lazyload} from 'mint-ui';
// //使用vue组件的component方法来注册组件
// Vue.component(Header.name,Header);
// Vue.component(Swipe.name,Swipe);
// Vue.component(SwipeItem.name,SwipeItem);
// Vue.component(Button.name,Button);
// Vue.component(Lazyload);

//导入全部mintui 组件
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

//导入vue-preview 图片预览插件
import VuePreview from 'vue-preview'

// defalut install
Vue.use(VuePreview)

//导入自定义全局css 用来定义preview图片布局
import './lib/CSS/global.css'


//导入moment组件
import moment from 'moment'
Vue.filter('dateFormat',function(datastr,pattern="YYYY-MM-DD HH:MM:SS"){
  return  moment(datastr).format(pattern)
})
//导入自定义的路由文件
import router from './router.js'
//接下来导入页面的主体app组件
import app from './App.vue'
//导入extra icon
import './lib/mui/css/icons-extra.css'
//导入自定义的css文件
// import './css/project.css'
//设置请求的根路径
Vue.http.options.root = 'http://vue.studyit.io';
//设置全局post 请求时候的表单数据格式和组织形式。
Vue.http.options.emulateJSON = true;

//在父组件中利用render 方法来渲染app父组件到页面
var vm = new Vue({
    el:'#app',
//render函数渲染组件到页面
    render:c=>c(app),

    //挂载路由对象到app组件
    router,
    //一定要在组件上挂载store才行
    store
})



